<template>
	<view class="page-content">

		<!-- 输入新密码 -->
		<view class="flex-start" style="align-items: center;margin-bottom: 15px;">
			<view class="inputLabel">输入新密码：</view>
			<input class="uni-input" v-model="newPassword" placeholder="请输入8位数新密码"
				style="flex: 1;border: 1px solid #f0f0f0;padding: 10px 10px;border-radius: 7px;" />
		</view>
		<view class="flex-start" style="align-items: center;margin-bottom: 15px;">
			<view class="inputLabel">再次输入：</view>
			<input class="uni-input" v-model="againPassword" placeholder="请输入8位数新密码"
				style="flex: 1;border: 1px solid #f0f0f0;padding: 10px 10px;border-radius: 7px;" />
		</view>
		<view class="flex-start" style="align-items: center;margin-bottom: 15px;">
			<view class="inputLabel">当前手机号：</view>
			<input class="uni-input" v-model="phoneNum" placeholder="请输入8位数新密码" :disabled="true"
				style="flex: 1;border: 1px solid #f0f0f0;padding: 10px 10px;border-radius: 7px;" />
		</view>

		<view class="flex-start" style="align-items: center;margin-bottom: 15px;">
			<view class="inputLabel">验证码：</view>
			<input class="uni-input" v-model="code" placeholder="请输入验证码"
				style="flex: 1;border: 1px solid #f0f0f0;padding: 10px 10px;border-radius: 7px;margin-right: 15px;" />
			<text style="color: #E61010;" v-if="codeGetFlag==false" @click="getCode">获取验证码</text>
			<text style="color: #E61010;" v-else>请{{second}}秒后再获取验证码</text>
		</view>
		<view class="confirmBtn" @click="toPublish">
			确认
		</view>
	</view>
</template>

<script>
	import {
		onLoad,
		onReady
	} from "@dcloudio/uni-app"
	import {
		login,
		send_sms_code
	} from '@/utils/api.js'

	import {
		account
	} from '@/utils/editPassward/index.js'

	
	let timer = null
	export default {
		data() {
			return {
				newPassword: '',
				againPassword: '',
				phoneNum: '190****9998',
				code: '',
				second: '',
				codeGetFlag: false,
				timer: null,
				id: '',
				valueNum: ''
			}
		},
	
		onLoad(options) {
			this.phoneNum = options.business_mobile
			this.id = options.id
		},
		methods: {
			async getCode() {
				this.codeGetFlag = true
				this.second = 60
				let res = await send_sms_code({
					phone_number: this.phoneNum
				})
				if (res.code == 200) {
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					});

					timer = setInterval(() => {
						this.second--
						if (this.second == 0) {
							this.codeGetFlag = false
							clearInterval(timer)
						}
					}, 1000)
				} else {
					uni.showToast({
						title: res.error,
						icon: 'error'
					});
				}
			},

			async toPublish() {
				if (this.newPassword == '') {
					uni.showToast({
						title: '密码不能为空',
						icon: 'error',
					})
					return
				}

				if (this.againPassword == '') {
					uni.showToast({
						title: '确认密码不能为空',
						icon: 'error',
					})
					return
				}
				if (this.code == '') {
					uni.showToast({
						title: '验证码不能为空',
						icon: 'error',
					})
					return
				}
				let id = this.id
				let data = {
					new_password: this.newPassword,
					new_password_again: this.againPassword,
					verification_code: this.code
				}

				let res = await account(data, id)
				if (res.code == 200) {
					uni.showToast({
						title: '修改成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
					setTimeout(() => {
						uni.redirectTo({
							url: `/pages/information/information`
						})
					}, 1000)
				} else {
					uni.showToast({
						title: res.error,
						icon: 'error',
					})
				}


			}
		},
		beforeUnmount() {
			// 清除任务定时器
			clearInterval(timer)
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: calc(100vh - 44px);
		background: #fff;
		padding: 20rpx 40rpx;
		position: relative;
	}

	.uni-textarea {
		border: 1px solid #f0f0f0;
		padding: 10px 10px;
		border-radius: 7px;
	}

	:deep(.uni-select__input-placeholder) {
		font-size: 16px !important;
		color: gray;
	}

	:deep(.uni-select) {
		height: 42px;
		border-radius: 7px;
	}

	.confirmBtn {

		width: 70%;
		background: #D43030;
		margin: 0 auto;
		height: 40px;
		border-radius: 20px;
		color: #fff;
		text-align: center;
		line-height: 40px;
	}
</style>